import 'package:flutter/material.dart';

class ChipDemo extends StatefulWidget {
  const ChipDemo({super.key});

  @override
  State<ChipDemo> createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  List<dynamic> _tags = ['Apple', 'Banana', 'Lemon'];
  var _action = "nothing";
  List<dynamic> _selected = [];
  var _choise = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ChipDemo"),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Wrap(
              spacing: 8.0,
              children: [
                const Chip(label: Text('Life')),
                const Chip(
                  label: Text('Sunset'),
                  backgroundColor: Colors.orange,
                ),
                const Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.grey,
                    child: Text('皓'),
                  ),
                ),
                const Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://img2.baidu.com/it/u=4217399485,306442533&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'),
                  ),
                ),
                Chip(
                  label: Text('City'),
                  onDeleted: () {},
                  deleteIcon: Icon(Icons.delete),
                  deleteIconColor: Colors.redAccent,
                  deleteButtonTooltipMessage: 'Remove this tag',
                ),
                const Divider(
                  //分割线
                  color: Colors.grey,
                  height: 32.0, //高度 但是线粗细还是1
                  indent: 32.0, //缩进
                  endIndent: 32.0, //缩进
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return Chip(
                        label: Text(tag),
                        onDeleted: () {
                          setState(() {
                            _tags.remove(tag);
                          });
                        });
                  }).toList(),
                ),
                Container(
                    width: double.infinity,
                    child: Text('ActionChip: $_action')),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return ActionChip(
                        label: Text(tag),
                        onPressed: () {
                          setState(() {
                            _action = tag;
                          });
                        });
                  }).toList(),
                ),
                const Divider(
                  //分割线
                  color: Colors.grey,
                ),
                Container(
                    width: double.infinity,
                    child: Text('FilterChip: $_action')),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return FilterChip(
                        label: Text(tag),
                        selected: _selected.contains(tag),
                        onSelected: (value) {
                          setState(() {
                            if (_selected.contains(tag)) {
                              _selected.remove(tag);
                            } else {
                              _selected.add(tag);
                            }
                          });
                        });
                  }).toList(),
                ),
                const Divider(
                  //分割线
                  color: Colors.grey,
                ),
                Container(
                    width: double.infinity,
                    child: Text('ChoiceChip: $_choise')),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return ChoiceChip(
                        label: Text(tag, style: TextStyle(color: _choise == tag?Colors.white:Colors.black),),
                        selectedColor: Colors.black,
                        selected: _choise == tag,
                        onSelected: (value) {
                          setState(() {
                            _choise = tag;
                          });
                        });
                  }).toList(),
                ),
              ],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.restore),
        onPressed: () {
          setState(() {
            _tags = ['Apple', 'Banana', 'Lemon'];
            _selected = [];
          });
        },
      ),
    );
  }
}
